<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>1-1起步</title>
</head>
<body>

<!-- 1. 创建容器 -->
<div id="c"></div>

<!-- 2. 引入 matter -->
<script src="../js/matter.js"></script>
<script>
  console.log('Matter.js版本：', Matter.version)

  // 3. 创建引擎
  let engine = Matter.Engine.create()

  // 4. 创建渲染器，并将引擎连接到画布上
  let render = Matter.Render.create({
    element: document.getElementById('c'), // 绑定页面元素
    engine: engine, // 绑定引擎
  })

  // 5-1. 创建两个正方形
  let boxA = Matter.Bodies.rectangle(400, 200, 80, 80)
  let boxB = Matter.Bodies.rectangle(450, 50, 80, 80)

  // 5-2. 创建地面，将isStatic设为true，表示物体静止
  let ground = Matter.Bodies.rectangle(400, 610, 810, 60, { isStatic: true })

  // 6. 将所有物体添加到世界中
  Matter.Composite.add(engine.world, [boxA, boxB, ground]);

  // 7. 执行渲染操作
  Matter.Render.run(render)

  // 8. 创建运行方法
  var runner = Matter.Runner.create()

  // 9. 运行渲染器
  Matter.Runner.run(runner, engine)
</script>
</body>
</html>